<template>
      <div>
        <!-- echart表格 -->
        <div id="myChart" :style="echartStyle"></div>
      </div>
</template>
 
<script>


    export default {
        props: {

            // 样式
            echartStyle: {
                type: Object,
                default(){
                    return {}
                }
            },
            // 标题文本
            titleText: {
                type: String,
                default: ''
            },
            // 数量
            sumNum: {
                type: String,
                default(){
                    return []
                }
            },
            // 提示框键名
            tooltipFormatter: {
                type: String,
                default: ''
            },
            // 扇形区域名称
            opinion: {
                type: Array,
                default(){
                    return []
                }
            },
            // 提示框标题
            seriesName: {
                type: Array,
                default(){
                    return []
                }
            },
            // 扇形区域数据
            opinionData: {
                type: Array,
                default(){
                    return []
                }
            },


        },
        data(){
            return {
                //
                charts: null,
            }
        },
        mounted(){
            this.$nextTick(function() {
                this.drawPie('myChart')
            })
        },
        methods: {
            // 监听扇形图点击
            eConsole(param) {
                // 向父组件传值
                this.$emit("currentEchartData",param.name);
            },
            // 绘制饼状图
            drawPie(id){
                this.charts = this.EChart.init(document.getElementById(id));
                this.charts.on("click", this.eConsole);
                this.charts.setOption({
                    title: {
                        text: this.titleText, // 标题文本
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
                    },
                    legend: {
                        orient: 'vertical',
                        top: 20,
                        left: 10,
                        data: this.opinion // 扇形区域名称
                    },
                    //空心中的数字
                    graphic:{
                        type:'text',
                        left:'center',
                        top:'45%',
                        style:{
                            text:this.sumNum,
                            textAlign:'center',
                            fill:'#302e33',
                            fontSize:25
                        }
                    },
                    series : [
                        {
                            name:this.opinionData['name'],  // 提示框标题
                            type: 'pie',
                            radius : ['35%','65%'],
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data:this.opinionData, // 扇形区域数据
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 100,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ],
                    sumNum:this.sumNum,


                })
            },
            render() {
                this.$nextTick(function() {
                    this.drawPie('myChart')
                })
            },

        }
    }
</script>
 

